<template>
  <div>
    <el-dialog title="启动" width="30%" v-model="dialogVisible" :close-on-click-modal="false"
      :close-on-press-escape="false" @closed="clear">
      <el-form label-width="100px" ref="processFormRef" label-position="right" :model="processForm">
        <el-form-item label="业务标识" prop="businessKey"
          :rules="[{ required: true, message: '请输入业务标识', trigger: 'blur' }]">
          <el-input type="text" v-model="processForm.businessKey" />
        </el-form-item>
        <el-form-item label="业务名称" prop="title">
          <el-input type="text" :resize="'none'" v-model="processForm.title" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="close">取消</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { startProcess } from 'src/api/flow/activiti'
import { $confirmMsg } from 'src/hooks/useCommon'

const processFormRef = ref()
const dialogVisible = ref<boolean>(false)
const processForm = reactive({
  processKey: '',
  businessKey: '',
  title: ''
})

// 弹出窗
const open = (key: string) => {
  dialogVisible.value = true
  processForm.processKey = key
}
const close = () => {
  dialogVisible.value = false
}
const clear = () => {
  processFormRef.value.resetFields()
}
defineExpose({
  open
})

// 提交
const emits = defineEmits(['apply'])
const submit = () => {
  $confirmMsg('确认启动流程吗？', () => {
    startProcess(processForm).then(data => {
      emits('apply')
      close()
    })
  })
}
</script>
